<template>
	<div class='lost'>
		<h2>失物招领</h2>
		<div class="lost__detail">
			<div class="lost__detail--wrap lost__detail--card">
				<div><a href="#">一卡通</a></div>
			</div>
			<div class="lost__detail--wrap lost__detail--else">
				<div><a href="#">其他</a></div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		
	}
</script>

<style scoped lang="scss">
	.lost {
		@include index_title;
	}
	.lost__detail {
		padding: $com-padding-lr-base 0;
		display: flex;
		justify-content: space-around;
	}
	.lost__detail--wrap {
		width: 8rem;
		height: 4rem;
		/*background-size: 8rem 4rem ;*/
		background-size: 100% 100%;
		div {
			width: 100%;
			height: 100%;
			line-height: 4rem;
			font-size: rem(24);
			text-align: center;
			background-color: rgba(0,0,0,.1);
			a {
				width: 100%;
				height: 100%;
				color: #fff;
				display: block;
			}
		}
	}
	.lost__detail--card {
		background-image: url(/static/img/card.jpg);
		background-repeat: no-repeat;
	}
	.lost__detail--else {
		background-image: url(/static/img/4.jpg);
		background-repeat: no-repeat;	
	}
</style>